<template>
  <el-table
    :key="tableKey"
    ref="tableRef"
    :data="tableData"
    tooltip-effect="dark"
    :header-cell-style="handerMethod"
    style="width: 100%; margin-top: 16px; font-size: 12px; min-height: 600px"
    :row-class-name="tableRowClassName"
    header-cell-class-name="tbaleheader"
    @sort-change="sortChange"
  >
    <template v-for="item in tableHeader">
      <el-table-column
        :label="item.headerName"
        :key="item.headerName"
        v-if="item.downList !== null && item.downList.length > 0"
        :prop="item.props"
        align="center"
      >
        <template v-for="i in item.downList">
          <el-table-column
            :key="i.props"
            :label="i.headerName"
            :prop="i.props"
            header-align="center"
            :fixed="fixedFun(i)"
            :min-width="widthFun(i)"
            :align="positionFun(i)"
            :label-class-name="`labeleven ${i.headerCode}`"
            :sortable="i.sort ? 'custom' : false"
          >
            <template slot-scope="scope">
              <span>
                <div v-if="i.props == '0' && scope.$index !== 0">
                  <span
                    :class="[scope.$index > 0 ? 'click_text' : '']"
                    @click="
                      routeTo(scope.row[i.props], item.props)
                    "
                    >{{ scope.row[i.props] }}</span
                  >
                </div>
                <div v-else>{{ scope.row[i.props] }}</div>
              </span>
            </template>
          </el-table-column>
        </template>
      </el-table-column>
      <el-table-column
        v-else
        :key="item.props"
        :label="item.headerName"
        :prop="item.props"
        :fixed="fixedFun(item)"
        :min-width="widthFun(item)"
        :align="positionFun(item)"
        header-align="center"
        :sortable="item.sort ? 'custom' : false"
      >
        <template slot-scope="scope">
          <span>
            <div v-if="item.props == '1'">
              <span
                :class="[scope.$index > 0 ? 'click_text' : '']"
                @click="routeTo(scope.row,item.props)"
                >{{ scope.row[item.props] }}</span
              >
            </div>
            <div v-else>{{ scope.row[item.props] }}</div>
          </span>
        </template>
      </el-table-column>
    </template>
  </el-table>
</template>
<script>
//引入封装的js
export default {
  props: {
    initData: {
      type: Array,
      default: () => [],
    },
    initHeader: {
      type: Array,
      default: () => [],
    },
    endMonth: {
      type: String,
      default: () => "",
    },
    sort: {
      type: Boolean,
      default: false,
    },
  },
  filters: {
    isCompare: (val) => {
      if (val == "--") return "--";
      if (val > 0) {
        return `${val} %`;
      } else {
        return `${val} %`;
      }
    },
  },
  data() {
    return {
      tableKey:0,
      tableData: [],
      spanObj: {},
      tableHeader: [],
    };
  },
  watch: {
    initData: {
      handler(val) {
        console.log(val)
        if (val && val.length > 0) {
          this.tableData = [];
          this.tableData = val;
          // this.spanObj = dataMethod(this.tableData);
            // this.tableKey++
        }
      },
      immediate: true,
    },
    initHeader: {
      handler(val) {
        this.tableHeader = val;
        console.log(val,"tableHeader")
          //  this.tableKey++
      },
      immediate: true,
    },
    sort: {
      handler(val) {
        this.$refs?.tableRef?.clearSort(); //清除排序
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    widthFun(item) {
      switch (item.props) {
        case "0":
          return "120px";
        case "1":
          if(item.headerName==='总公司'){
            return "220px";
          }
        default:
          return item?.sort ? "130px" : "120px";
      }
    },
    positionFun(item) {
      switch (item.props) {
        case "0":
          return "center";
        case "1":
          if(item.headerName==='总公司'){
            return "center";
          };
        case "2":
          if(item.headerName==='分支评级'){
            return "center";
          };
        default:
          return "right";
      }
    },
    fixedFun(item) {
      switch (item.props) {
        case "0":
          return true;
        case "1":
          return true;
        case "2":
          return true;
        default:
          return false;
      }
    },
    routeTo(row,index) {
      if (index === '1') {
        this.$router.push({
          name: "考核360",
          params: {
            name: row?.["0"],
            code: row?.orgType === 1?row?.orgCode:row?.deptCode,
            year: this?.endMonth?.slice(0, 4),
            month: this?.endMonth?.slice(5, 7),
            endMonth: this?.endMonth,
            key: 1,
          },
        });
      }
      // else if(index === '1') {
      //   this.$router.push({
      //     name: "考核360营业部",
      //     params: {
      //       name: row?.["0"],
      //       code: row?.deptCode,
      //       year: this?.endMonth?.slice(0, 4),
      //       month: this?.endMonth?.slice(5, 7),
      //       endMonth: this?.endMonth,
      //     },
      //   });
      // }
    },
    sortChange({ column, prop, order }) {
      let indCode =column?.label==='分组'?'groupSort': column?.label==='分支评级' ? 'gradeSort' : column.labelClassName.replace("labeleven ", "");
      let label = column.label;
      this.$emit("handleSortChange", { indCode, order, label });
    },

    //合并单位表头,第一列和第二列第一行的表头，如不需要合并把这个方法注释即可
    handerMethod({ row, column, rowIndex, columnIndex }) {
      if (rowIndex == 0) {
        return {
          color: "#000",
          fontWeight: "600",
          fontSize: "14px",
          background: "rgba(231, 239, 255, 1)",
        };
      }
    },
    // 表格斑马纹
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 === 0) {
        if (rowIndex === 0) {
          return "marginL orange";
        } else {
          return "marginL";
        }
      } else {
        return "blueRow marginL";
      }
    },
  },
};
</script>
